<html>
<head></head>
<body><a name="ZH-CN_TOPIC_0000002347873977"></a><a name="ZH-CN_TOPIC_0000002347873977"></a>
<h1>弹出框焦点策略</h1>
<div><p>
    ArkUI的弹出框焦点策略可以设定是否中断用户当前操作，并聚焦到新弹出的弹出框。若设定弹出框不获取焦点，则新弹出时不会中断用户当前操作，例如，当用户正在文本框中输入内容时，新弹出的弹出框不会关闭软键盘，焦点仍保留在文本框中。</p>
    <p>从API version 19开始，可以通过设置<a
            href="https://developer.huawei.com/consumer/cn/doc/harmonyos-references/js-apis-promptaction#basedialogoptions11"
            target="_blank">focusable</a>参数来管理弹出框是否获取焦点。</p>
    <div class="section" id="使用约束"><a name="ZH-CN_TOPIC_0000002347873977__%E4%BD%BF%E7%94%A8%E7%BA%A6%E6%9D%9F"></a><a
            name="%E4%BD%BF%E7%94%A8%E7%BA%A6%E6%9D%9F"></a>     <h4>使用约束</h4>
        <p><a href="https://developer.huawei.com/consumer/cn/doc/harmonyos-guides/arkts-uicontext-custom-dialog">openCustomDialog</a>和<a
                href="https://developer.huawei.com/consumer/cn/doc/harmonyos-guides/arkts-common-components-custom-dialog">CustomDialog</a>支持通过focusable参数来管理弹出框是否获取焦点。
        </p>
        <div class="note"><img originheight="38" originwidth="102"
                               src="https://communityfile-drcn.op.dbankcloud.cn/FileServer/getFile/cmtyPub/011/111/111/0000000000011111111.20250709163043.77739569851974854791930901618617:50001231000000:2800:1FB4EDE267F9DD00A8486888B8851AA5D6C016E3B8440E35C36E0A3644A4F2B9.png"><span
                class="notetitle"> </span>
            <div class="notebody"><p>只有弹出覆盖在当前窗口之上的弹出框才可以获取焦点。</p></div>
        </div>
    </div>
    <div class="section" id="创建不获取焦点的弹出框"><a
            name="ZH-CN_TOPIC_0000002347873977__%E5%88%9B%E5%BB%BA%E4%B8%8D%E8%8E%B7%E5%8F%96%E7%84%A6%E7%82%B9%E7%9A%84%E5%BC%B9%E5%87%BA%E6%A1%86"></a><a
            name="%E5%88%9B%E5%BB%BA%E4%B8%8D%E8%8E%B7%E5%8F%96%E7%84%A6%E7%82%B9%E7%9A%84%E5%BC%B9%E5%87%BA%E6%A1%86"></a>
        <h4>创建不获取焦点的弹出框</h4>
        <div class="note"><img originheight="38" originwidth="102"
                               src="https://communityfile-drcn.op.dbankcloud.cn/FileServer/getFile/cmtyPub/011/111/111/0000000000011111111.20250709163044.70953773545903339559165020701395:50001231000000:2800:8F923DBB8B14E001B050B357877BE540A39467A17798E9B8FA7B1D88BFBCBB81.png"><span
                class="notetitle"> </span>
            <div class="notebody"><p>详细变量定义请参考<a href="#完整示例">完整示例</a>。</p></div>
        </div>
        <ol>
            <li>初始化一个弹出框内容区域，内含一个Text组件。</li>
        </ol>
        <pre class="ts">private message = '弹窗'
@State dialogIdIndex: number = 0
@Builder customDialogComponent() {
  Column({ space: 5 }) {
    Text(this.message + this.dialogIdIndex)
      .fontSize(30)
  }
  .height(200)
  .padding(5)
  .justifyContent(FlexAlign.SpaceBetween)
}</pre>
        <ol>
            <li>创建一个TextInput组件，在onChange事件函数中通过调用<a
                    href="https://developer.huawei.com/consumer/cn/doc/harmonyos-references/js-apis-arkui-uicontext#uicontext"
                    target="_blank">UIContext</a>中的<a
                    href="https://developer.huawei.com/consumer/cn/doc/harmonyos-references/js-apis-arkui-uicontext#getpromptaction"
                    target="_blank">getPromptAction</a>方法获取<a
                    href="https://developer.huawei.com/consumer/cn/doc/harmonyos-references/js-apis-arkui-uicontext#promptaction"
                    target="_blank">PromptAction</a>对象，再通过该对象调用<a
                    href="https://developer.huawei.com/consumer/cn/doc/harmonyos-references/js-apis-arkui-uicontext#opencustomdialog12"
                    target="_blank">openCustomDialog</a>接口，并设置<a
                    href="https://developer.huawei.com/consumer/cn/doc/harmonyos-references/js-apis-promptaction#basedialogoptions11"
                    target="_blank">focusable</a>参数为false，以创建弹出框。
            </li>
        </ol>
        <pre class="ts">TextInput()
  .onChange(() =&gt; {
    this.dialogIdIndex++
    this.getUIContext().getPromptAction().openCustomDialog({
      builder: () =&gt; {
        this.customDialogComponent()
      },
      focusable: false
    }).then((dialogId: number) =&gt; {
      setTimeout(() =&gt; {
        this.getUIContext().getPromptAction().closeCustomDialog(dialogId);
      }, 3000)
    })
  })</pre>
    </div>
    <div class="section" id="完整示例"><a name="ZH-CN_TOPIC_0000002347873977__%E5%AE%8C%E6%95%B4%E7%A4%BA%E4%BE%8B"></a><a
            name="%E5%AE%8C%E6%95%B4%E7%A4%BA%E4%BE%8B"></a>     <h4>完整示例</h4>
        <p>当用户正在文本框中输入内容时，新弹出的弹出框不会关闭软键盘，焦点仍保留在文本框中。</p>
        <pre class="ts">@Entry
@Component
export struct Index {
  private message = '弹窗'
  @State dialogIdIndex: number = 0
  @Builder customDialogComponent() {
    Column({ space: 5 }) {
      Text(this.message + this.dialogIdIndex)
        .fontSize(30)
    }
    .height(200)
    .padding(5)
    .justifyContent(FlexAlign.SpaceBetween)
  }

  build() {
    Column({ space: 5 }) {
      TextInput()
        .onChange(() =&gt; {
          this.dialogIdIndex++
          this.getUIContext().getPromptAction().openCustomDialog({
            builder: () =&gt; {
              this.customDialogComponent()
            },
            focusable: false
          }).then((dialogId: number) =&gt; {
            setTimeout(() =&gt; {
              this.getUIContext().getPromptAction().closeCustomDialog(dialogId);
            }, 3000)
          })
        })
    }.width('100%')
  }
}</pre>
        <p><span><img originheight="704" originwidth="424"
                      src="https://communityfile-drcn.op.dbankcloud.cn/FileServer/getFile/cmtyPub/011/111/111/0000000000011111111.20250709163044.64601915459999243209890728427709:50001231000000:2800:349369137FEF527E920C3C20AE7A4C488F7BBD4410FA8907067024534E4DBFA5.gif"></span>
        </p></div>
</div>
<div></div>
</body>
</html>